<template>
<!--财务概况-->
<div id="finance_outline">
	<div class="container">
        <div class="nav">
            <ul>
                <li>
                    <router-link to='/companyInfo' v-if="this.$store.state.common.companyId !== null">{{ $lang("COMPANY_INFO") }}</router-link>
                </li>
                <li>
                    <router-link to='/companyOutline' v-if="this.$store.state.common.companyId !== null">{{ $lang("COMPANY_INTRODUCE") }}</router-link>
                </li>
                <li class="active">
                    <router-link to='/financeOutline' v-if="this.$store.state.common.companyId !== null">{{ $lang('FINANCE_SITUATION') }}</router-link>
                </li>
            </ul>
        </div>
		<div class="c_top">
			<el-dropdown  trigger="click">
			  <el-button type="primary">
			    {{ $lang(tableType) }}<i class="el-icon-arrow-down el-icon--right"></i>
			  </el-button>
			  <el-dropdown-menu slot="dropdown">
			    <el-dropdown-item  @click.native='chooseTable(index)' v-for='(item,index) in dropDownData'>{{ $lang(item) }}</el-dropdown-item>
			  </el-dropdown-menu>
			</el-dropdown>
			<a @click="choostDateType(index)" :class="{active: activeDateIdx === index }" v-for="(item,index) in dateCont">{{ $lang(item) }}</a>
		</div>
		<div class="c_bot">
           <div style="display:flex;">
                <div>
                    <div class="table" v-for="(item,index) in tableTitleData">{{ $lang(item.title)}}</div>
                </div>
                <div class="table-th" v-for="(item,index) in listData.data">
                    <div v-if="reportType == 'balanceSheet'">
                        <div class="table-tr">{{item.reportDate || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.cashDeposit || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.depositsInOtherBanks || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.tradingFinancialAssets || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.loansAndPayments || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.interestsReceivable || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.equityInvestments || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.availableForSaleAssets || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.fixedAssets || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.intangibleAssets || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.totalAssets || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.borrowingsFromCentralBank || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.otherFinancialInstitutionsAssets || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.financialAssetsHeldForLiabilities || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.depositTanking || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.employeeBenefitsPayable || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.taxesSurchargesPayable || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.interestsPayable || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.totalLiabilities || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.registeredCapital || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.surplusReserve || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.undistributedProfits || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.minorityInterest || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.totalShareholdersEquity || $lang('No_information')}}</div>
                    </div>
                    <div v-else-if="reportType == 'incomeStatement'">
                        <div class="table-tr">{{item.reportDate || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.interestIncome || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.interestExpense || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.netInterestIncome || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.netProfitOnCommission || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.totalOperationRevenue || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.totalOperationCosts || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.operationProfits || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.investmentIncome || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.foreignExchangeTransactionIncome || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.fairValueChangeIncome || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.lossesOnTheAssetImpairment || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.businessAdminExpenses || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.profitsBeforeTax || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.incomeTaxExpenses || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.netProfits || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.nonNetProfitDeduction || $lang('No_information')}}</div>
                    </div>
                    <div v-else-if="reportType == 'cashFlowsStatement'">
                        <div class="table-tr">{{item.reportDate || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.increaseInCustomerDeposits || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.increaseInCustomerLoans || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.paymentOfTax || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.paymentOfEmployee || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.operatingCashInflows || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.operatingCashOutflows || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.operatingCashFlowsNet || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.investmentCashInflows || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.investmentCashOutflows || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.investmentCashFlowsNet || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.financingCashInflows || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.financingCashOutflows || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.financingCashFlowsNet || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.impactOfExchangeRate || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.cashEquivalentsIncreaseNet || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.plusBeginCashEquivalentsBalance || $lang('No_information')}}</div>
                        <div class="table-tr">{{item.endCashEquivalentsBalance || $lang('No_information')}}</div>
                    </div>
                </div>
                <div class="noM" v-if="listData.data == ''">
                    {{ $lang('No_information')}}
                </div>
           </div>
		</div>
        <el-pagination layout="prev, pager, next" :total="listData.totalPage * 10" @current-change="changePage"></el-pagination>
	</div>
</div>
</template>

<script>
import { gets } from "@/api/api.js";
export default {
	data(){
		return {
			dropDownData: ['ASSETS_AND_LIABILITY_TABLE','PROFIT_TABLE','CASH_FLOW_TABLE'], // 下拉表格列表
			tableType:'ASSETS_AND_LIABILITY_TABLE', // 选中表格类型
			tableTitleOfAssets: [	// 资金负债表每行的第一个单元格信息
                { title: 'SUBJECT_YEAR'},
                { title: 'CASH_AND_DEPOSIT_OF_CENTRAL_ANK_FUNDS_YUAN'},
                { title: 'INTERBANK_PAYMENT_YUAN'},
                { title: 'TRANSACT_FINANCE_ASSETS_YUAN'},
                { title: 'LOANS_AND_ADVANCES_YUAN'},
                { title: 'INTEREST_RECEIVABLE_YUAN'},
                { title: 'LONG_TERM_EQUIRY_INVERST'},
                { title: 'AVAILABLE_FOR_SALE_FINANCIAL_AS_ASSETS_YUAN'},
                { title: 'FIXED_ASSETS_YUAN'},
                { title: 'INTANGIBLE_ASSETS_YUAN'},
                { title: 'TOTAL_ASSETS'},
                { title: 'BORROWING_FROM_CENTRAL_BACNKS_YUAN'},
                { title: 'INTERBANKAND_OTHER_FINANCIAL_INSITUTIONS_MONEY_YUAN'},
                { title: 'TRANSACIONAL_FINANCIAL_LIABLITY_YUAN'},
                { title: 'DEPOSTIT_TAKING_YUAN'},
                { title: 'SALARY_PAYABLE_FOR_EMPLY'},
                { title: 'PAYABLE_TAX_YUAN'},
                { title: 'INTEREST_PAYABLE'},
                { title: 'TOTAL_LIABILITY'},
                { title: 'CAPITAL_STOCK_YUAN'},
                { title: 'SURPLUS_RESERVES'},
                { title: 'UNDISTRIBUTE_PROFIT_YUAN'},
                { title: 'MINORITY_SHAREHOLDER_RIGHT_AND_INTERESTS'},
                { title: 'SHAREHOLDER_EQUIRY'}
			],
            tableTitleProfit:[  // 利润表每行的第一个单元格信息
                { title: 'SUBJECT_YEAR'},
                { title: 'INTEREST_INCOME' },
                { title: 'INTEREST_EXPENSES_YUAN' },
                { title: 'NET_INTEREST_INCOME_YUAN' },
                { title: 'COM_AND_COM_NET_INCOME_YUAN' },
                { title: 'TOTAL_OPERATING_INCOME_YUAN' },
                { title: 'TOTAL_OPERATING_COST_YUAN' },
                { title: 'OPERATING_PROFIT_YUAN' },
                { title: 'INVESTMENT_INCOME_YUAN' },
                { title: 'EXCHANGE_EARNINGS_YUAN' },
                { title: 'FAIR_VALUE_CHANGE_INCOME_YUAN' },
                { title: 'IMPAIRMENT_OF_ASSETS' },
                { title: 'BUSSINESS_AND_MANAGEMENT_FREE_YUAN' },
                { title: 'TOTAL_PROFIT_YUAN' },
                { title: 'INCOME_TAX_YUAN' },
                { title: 'NET_PROFIT' },
                { title: 'NON_NET_PROFIT_DEFUCTION_YUAN' }
			],
            tableTitleCash:[ // 现金流量表每行的第一个单元格信息
                { title: 'SUBJECT_YEAR'},
                { title: 'CUSTOMER_DEPOSITS_AND_INTERBANK_DEPOSITS_NET_INCREASE_YUAN' },
                { title: 'NET_INCREASE_IN_CUSTOMER_LOANS_AND_ADVANCES_YUAN' },
                { title: 'TAXES_AND_FEES_PAID_YUAN' },
                { title: 'PAYMENT_TO_WORKERS_AND_STAFF_MEMVERS_CASH_PAID_YUAN' },
                { title: 'OPERATING_CASH_INFLOW_YUAN' },
                { title: 'OPERATING_CASH_OUTFLOW_YUAN' },
                { title: 'NET_CASH_FLOW_FROM_OPERATION_YUAN' },
                { title: 'INVESTMENT_CASH_INFLOW_YUAN' },
                { title: 'INVESTMENT_CASH_OUTFLOW_YUAN' },
                { title: 'NET_CASH_FLOW_OF_INVERSTMENT_YUAN' },
                { title: 'FUND_RAISING_CASH_INFLOW_YUAN' },
                { title: 'FUND_RAISING_CASH_OUTFLOW_YUAN' },
                { title: 'NET_CASH_FLOW_FROM_FUNDRAISING_YUAN' },
                { title: 'THE_IMPACT_OF_EXCHANGE_REATE_MOVEMENTS_ON_CASH_YUAN' },
                { title: 'NET_INCREASE_IN_CASH_AND_CASH_EQUIVALENTS_AMOUNT_YUAN' },
                { title: 'PLUS_CASH_AND_CASH_EQUIVALENTS_AT_THE_BEGINNGING_MATERIAL_BALANCE_YUAN' },
                { title: 'CASH_AND_CASH_EQUIVALENTS_AT_THE_END_OF_THE_YEAR_AMOUNT_YUAN' }
			],
            tableTitleData:[],
            listData: [],
			dateCont:["ACCORDING_REPORT_DATE","ACCORDING_YEAR","ACCORDING_SEASON"],
			activeDateIdx:0,
            pageNo: 1,
            dateType: 'REPORT_DAY',
            reportType: 'balanceSheet'
		}
	},
	methods:{
		chooseTable(idx){
            let that = this
			that.tableType = that.dropDownData[idx];
            if (that.tableType == 'ASSETS_AND_LIABILITY_TABLE') {
                that.tableTitleData = that.tableTitleOfAssets
                that.pageNo = 1
                that.reportType = 'balanceSheet'
            } else if (that.tableType == 'PROFIT_TABLE') {
                that.tableTitleData = that.tableTitleProfit
                that.pageNo = 1
                that.reportType = 'incomeStatement'
            } else if (that.tableType == 'CASH_FLOW_TABLE') {
                that.tableTitleData = that.tableTitleCash
                that.pageNo = 1
                that.reportType = 'cashFlowsStatement'
            }
            that.getRelease()
		},
        changePage(type) {
            let that = this
            that.pageNo = type
            that.getRelease()
        },
   	    formatter(row) {
            return this.$lang(row.title);
        },
		choostDateType(idx){
            let that = this
            that.activeDateIdx = idx;
            if (that.activeDateIdx == 0) {
                that.dateType = 'REPORT_DAY'
                that.pageNo = 1
            } else if (that.activeDateIdx == 1) {
                that.pageNo = 1
                that.dateType = 'YEAR'
            } else if (that.activeDateIdx == 2) {
                that.pageNo = 1
                that.dateType = 'QUARTER'
            }
            that.getRelease()
        },
        async getRelease() {
            let that = this
            try {
                let res = await gets.searchCompanyList("/report/find-page.json", {
                    companyId : that.$store.state.common.companyId,
                    dateType: that.dateType,
                    reportType: that.reportType,
                    pageNo: that.pageNo,
                    pageSize: 6
                });
                that.listData = res.data
            } catch (e) {
                console.log(e)
                throw e;
            }
        }
	},
	mounted(){
        this.chooseTable(0)
	}
}
</script>

<style scoped lang="scss">
@import '~assets/scss/finance_outline.scss';
.table{
    color: #fff;
    width: 140px;
    padding: 4px 22px;
    border-bottom: solid 1px #344E8F;
    font-size: 14px;
    border-right: solid 1px #344E8F;
    height:50px;
    display: flex;
    align-items: center;
}
.table-th{
    color: #5580E9;
}
.table-th:nth-child(2n+1){
    color: #3CCC72;
}
.table-tr{
    width: 128px;
    padding: 4px 20px;
    border-bottom: solid 1px #344E8F;
    font-size: 14px;
    border-right: solid 1px #344E8F;
    height:50px;
    display: flex;
    align-items: center;
}
.noM{
    flex: 1;
    text-align: center;
    color: #fff;
    margin-top: 30%;
}
// #finance_outline{
//     .container{
//         .nav{
//             ul{
//                 display: flex;
//                 align-items: center;
//                 li{
//                     width: 130px;
//                     height: 40px;
//                     line-height: 40px;
//                     text-align: center;
//                     background-color: #1A233E;
//                     border:1px solid rgba(52,78,143,1);
//                     border-bottom: 0;
//                     font-size: 14px;
//                     a{
//                         color: #fff;
//                     }
//                 }
//                 li:first-child{
//                     border-right: 0;
//                 }
//                 .active{
//                     width: 130px;
//                     height: 40px;
//                     line-height: 40px;
//                     text-align: center;
//                     background-color: #4e75d5;
//                     border-left: 0;
//                 }
//             }
//         }
//     }
// }
#finance_outline{
    .container{
        .nav{
            margin-bottom: 10px;
            ul{
                display: flex;
                align-items: center;
                li{
                    flex: 1;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    background-color: #204d74;
                    font-size: 14px;
                    a{
                        color: #fff;
                        display: block;
                    }
                }
                .active{
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    background-color:#286090;
                    border-right: 0;
                }
            }
        }
    }
}
</style>